<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="./?/file&name=base.min.css">
    <link rel="stylesheet" href="./?/file&name=Emoji.css">
    <link rel="icon" href="./?/file&name=logo.png">
    <link rel="preload" as="image" href="?/file&name=emoji (1).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (2).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (3).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (4).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (5).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (6).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (7).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (8).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (9).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (10).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (11).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (12).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (13).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (14).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (15).gif">
    <link rel="preload" as="image" href="?/file&name=emoji (16).png">
    <link rel="preload" as="image" href="?/file&name=emoji (17).gif">
    {CSS}
</head>
<body>
<a id="showToast" class="btn" title="Message" data-toggle="toast"></a>
<div class="content">
    <div class="content-heading">
        <div class="container">
            <h2 class="text-center heading ">当前房间ID：{COOKIE_roomId}</h2>
            <h3 class="text-center heading margin-no-top">房间管理员：<b id="adminId"></b>&nbsp;<a class="btn btn-lg waves-button waves-effect waves-light" id="manage-room" data-toggle="modal" href="#modal-manage">管理房间</a></h3>
        </div>
    </div>
    <div id="main-div" class="container"></div>
    <div class="text-center margin-top">
        <a class="btn btn-flat waves-button waves-effect waves-light" id="sendPicBtn"><i class="fa fa-image fa-2x"></i></a>
        <a class="btn btn-flat waves-button waves-effect waves-light" data-toggle="modal" href="#modal-emoji"><i class="fa fa-smile-o fa-2x"></i></a>
        <a class="btn btn-flat waves-button waves-effect waves-light" data-toggle="modal" href="#modal-info"><i class="fa fa-info-circle fa-2x"></i></a>
        <label for="message">消息：</label>
        <textarea class="form-control form-control-inline" id="message" cols="30" rows="5" autofocus></textarea>
        <a class="btn btn-flat waves-button waves-effect waves-light" id="send-message">发送</a>
    </div>
    <div style="display: none">
        <a class="btn btn-lg waves-button waves-effect waves-light" id="sendMessage">发送消息</a>&nbsp;
    </div>
</div>
<form id="upload-form" enctype="multipart/form-data">
    <input style="display: none" type="file" name="upload-file" id="input-message-pic" accept="image/*">
</form>

<div aria-hidden="true" class="modal fade" id="modal-emoji" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-heading">
                <a class="modal-close" data-dismiss="modal">&times;</a>
                <h2 class="modal-title">插入emoji表情</h2>
            </div>
            <div class="modal-inner">
                <div class="row">
                    <div id="emoji-list"></div>
                </div>
            </div>
            <div class="modal-footer">
                <p class="text-right">
                    <button class="btn btn-flat btn-alt" data-dismiss="modal">关闭</button>
                </p>
            </div>
        </div>
    </div>
</div>

<div aria-hidden="true" class="modal fade" id="modal-info" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-heading">
                <a class="modal-close" data-dismiss="modal">&times;</a>
                <h2 class="modal-title">聊天框帮助</h2>
            </div>
            <div class="modal-inner">
                <p>在消息框按Enter键可以换行，按Ctrl+Enter键即可快捷发送。</p>
                <p>彩色文字格式： #颜色 文字 颜色#<br>例如：#red红色red# 将会显示<b class="message-red">红色</b><br>支持的颜色有：<b class="message-red">red</b>,<b class="message-yellow">yellow</b>,<b class="message-blue">blue</b>,<b class="message-green">green</b>,<b class="message-purple">purple</b>,<b class="message-orange">orange</b>,<b class="message-brown">brown</b>,<b class="message-gray">gray/grey</b></p>
                <p>自定义字体大小：#h(1-6) 文字 h(1-6)#<br>例如：#h1大字体h1# 将会显示<b class="text-h1">大字体</b><br>支持的字体大小：<b class="text-h1">H1</b>,<b class="text-h2">H2</b>,<b class="text-h3">H3</b>,<b class="text-h4">H4</b>,<b class="text-h5">H5</b>,<b class="text-h6">H6</b></p>
            </div>
            <div class="modal-footer">
                <p class="text-right">
                    <button class="btn btn-flat btn-alt" data-dismiss="modal">关闭</button>
                </p>
            </div>
        </div>
    </div>
</div>

<a id="open-modal-dialog" data-toggle="modal" href="#modal-dialog"></a>
<div aria-hidden="true" class="modal fade" id="modal-dialog" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-heading">
                <a class="modal-close" data-dismiss="modal">&times;</a>
                <h2 class="modal-title" id="modal-dialog-title"></h2>
            </div>
            <div class="modal-inner">
                <p id="modal-dialog-message"></p>
            </div>
            <div class="modal-footer">
                <p class="text-right">
                    <button class="btn btn-flat btn-alt" data-dismiss="modal">取消</button>
                    <button class="btn btn-flat btn-alt" data-dismiss="modal">确定</button>
                </p>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" class="modal fade" id="modal-manage" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-heading">
                <a class="modal-close" data-dismiss="modal">&times;</a>
                <h2 class="modal-title">管理房间</h2>
            </div>
            <div class="modal-inner">
                <div class="form-group">
                    <div class="checkbox checkbox-adv">
                        <label for="manage-send-pic">
                            <input class="access-hide" type="checkbox" id="manage-send-pic">是否可以发送图片
                        </label>
                    </div>
                    <div class="checkbox checkbox-adv">
                        <label for="manage-join-tip">
                            <input class="access-hide" type="checkbox" id="manage-join-tip">加入房间提示消息
                        </label>
                    </div>
                    <a class="btn btn-flat waves-button waves-effect waves-light" href="./?/clean">清空消息</a>
                </div>
                <hr>
                <section class="content-inner">
                    <h4 class="content-sub-heading">禁言列表</h4>
                    <div class="table-responsive">
                        <table class="table" title="禁言列表">
                            <thead>
                                <tr>
                                    <th>禁言时间点</th>
                                    <th>用户编号</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="ban-list-main"></tbody>
                        </table>
                        <a class="btn btn-flat" id="add-ban-btn">添加禁言</a>
                        <div id="add-ban" class="form-group form-group-label" style="display: none">
                            <label class="floating-label" for="ban-id">用户编号</label>
                            <input class="form-control" id="ban-id" type="number" minlength="1" maxlength="3" min="1" max="100">
                            <a class="btn pull-right" id="add-ban-save">禁言</a>
                            <a class="btn pull-right" id="add-ban-cancel">取消</a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="modal-footer">
                <p class="text-right">
                    <button class="btn btn-flat btn-alt" data-dismiss="modal">取消</button>
                    <button class="btn btn-flat btn-alt" id="manage-ok">确定</button>
                </p>
            </div>
        </div>
    </div>
</div>
<div class="float-message">消息文字</div>

<div id="zoom_pic"><img><span>&times;</span></div>

<div class="footer">
    <p>Developed by SCH</p>
    <p>Chat-Lite {VERSION}<br>Running with PHP {PHPVERSION}</p>
</div>
<div>
    <button onclick="history.back();" style="position: fixed;top: 0;left: 0;z-index: 999;" class="btn btn-lg waves-button waves-effect waves-light"><span class="fa fa-arrow-left fa-2x"></span></button>
    <button id="back" onclick="window.open(`./?/`,`_self`)" style="position: fixed;top: 0;left: 84px;z-index: 999;" class="btn btn-lg waves-button waves-effect waves-light"><span class="fa fa-home fa-2x"></span></button>
    <button id="refresh" onclick="location.reload()" style="position: fixed;top: 0;left: 168px;z-index: 999;" class="btn btn-lg waves-button waves-effect waves-light"><span class="fa fa-refresh fa-2x"></span></button>
</div>
{SetColor}
<script src="./?/file&name=jquery.min.js"></script>
<script src="./?/file&name=base.min.js"></script>
<script src="./?/file&name=SetColor.js"></script>
{JS}
</body>
</html>